$(function () {
  // 准备一个变量，用来记录当前页的页码
  let cPage = 1
  /* 1. 查询文章分类 */
  $.ajax({
    method: 'GET',
    url: BigNew.category_list,
    success: (res) => {
      // console.log(res.data)
      const htmlStr = template('cateItem', { list: res.data })
      $('#selCategory').html(htmlStr)
    },
  })

  /* 2. 文章列表查询 - 文章搜索 */
  getArticleList()

  function getArticleList() {
    // 3.2 获取筛选模块的两个下拉框值
    const type = $('#selCategory').val()
    const state = $('#selStatus').val()
    console.log('测试数据', { type, state })
    // 面向接口编程，发送请求，获取文章列表(文章搜索)
    $.ajax({
      method: 'GET',
      url: BigNew.article_query,
      data: {
        key: '', // 搜索关键词，为空返回某类型所有文章
        type: type, // 文章类型id，为空返回所有类型文章
        state: state, // 文章状态：草稿  已发布，为空返回所有状态文章
        page: cPage, // 页码
        perpage: 10, // 页容量
      },
      success: (res) => {
        // console.log(res)
        // 调用模板
        const htmlStr = template('articleItem', { list: res.data.data })
        // 把模板写入到页面中
        $('tbody').html(htmlStr)
        // 调用插件封装的函数(当前所在页, 总页数)
        const totalPage = res.data.totalPage
        // console.log(totalPage)
        setPage(cPage, totalPage)
      },
    })
  }

  /* 3.0 筛选功能 */
  $('#btnSearch').click((e) => {
    // 3.1 阻止默认的表单提交，如果忘记了阻止会刷新页面
    e.preventDefault()
    // 🧨注意：点击筛选，需要把页面初始化变回 1，筛选条件变化了从第一页开始看
    cPage = 1
    // 3.2 获取筛选模块的两个下拉框值(写在函数内部)
    // 3.3 在函数内部获取了两个下拉框的值，并发送请求获取最新数据，渲染成列表
    getArticleList()
  })

  /* 4.0 分页功能 */
  /**
   * 插件参考手册封装的
   * @param pageCurrent 当前所在页
   * @param pageSum 总页数
   * @param callback 调用ajax的函数
   */
  function setPage(pageCurrent, pageSum, callback) {
    $('.pagination').bootstrapPaginator({
      //设置版本号
      bootstrapMajorVersion: 3,
      // 显示第几页
      currentPage: pageCurrent,
      // 总页数
      totalPages: pageSum,
      //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
      onPageClicked: function (event, originalEvent, type, page) {
        console.log('当分页插件单击操作按钮的时候', page)
        // 1️⃣ 把当前点击的页码赋值给cPage, 调用ajax,渲染页面
        cPage = page
        // 2️⃣ 根据新的分页数据重新发送 ajax 请求
        getArticleList && getArticleList()
      },
    })
  }

  /* 5.0 删除文章 */
  $('tbody').on('click', '.delete', function () {
    // 5.1 获取删除按钮上的id
    const id = $(this).attr('data-id')
    // console.log(id)
    // 5.2 发送 ajax 请求
    $.ajax({
      method: 'POST',
      url: BigNew.article_delete,
      data: { id },
      success: (res) => {
        // console.log(res)
        // 5.3 删除成功后，重新获取最新的文章列表
        getArticleList()
      },
    })
  })
})
